<template>
	<view class="preference-page">
		<view class="section">
			<view class="section-title">年龄范围</view>
			<view class="slider-container">
				<slider class="slider" :value="ageRange[0] - 18" :min="0" :max="62" :step="1" @change="onMinAgeChange" show-value />
				<text class="slider-text">{{ ageRange[0] }}岁</text>
				<slider class="slider" :value="ageRange[1] - 18" :min="0" :max="62" :step="1" @change="onMaxAgeChange" show-value />
				<text class="slider-text">{{ ageRange[1] }}岁</text>
			</view>
		</view>
		
		<view class="section">
			<view class="section-title">身高范围</view>
			<view class="slider-container">
				<slider class="slider" :value="heightRange[0] - 150" :min="0" :max="50" :step="1" @change="onMinHeightChange" show-value />
				<text class="slider-text">{{ heightRange[0] }}CM</text>
				<slider class="slider" :value="heightRange[1] - 150" :min="0" :max="50" :step="1" @change="onMaxHeightChange" show-value />
				<text class="slider-text">{{ heightRange[1] }}CM</text>
			</view>
		</view>
		
		<view class="section">
			<view class="section-title">月收入要求</view>
			<view class="income-selector">
				<picker :range="incomeOptions" :value="incomeIndex" @change="onIncomeChange" class="picker">
					<view class="picker-value">
						<text>{{ formData.income || '请选择月收入要求' }}</text>
						<image class="arrow-icon" src="/static/images/arrow-right.png" mode="aspectFit"></image>
					</view>
				</picker>
			</view>
		</view>
		
		<view class="section">
			<view class="section-title">学历要求</view>
			<view class="education-selector">
				<picker :range="educationOptions" :value="educationIndex" @change="onEducationChange" class="picker">
					<view class="picker-value">
						<text>{{ formData.education || '请选择学历要求' }}</text>
						<image class="arrow-icon" src="/static/images/arrow-right.png" mode="aspectFit"></image>
					</view>
				</picker>
			</view>
		</view>
		
		<view class="section">
			<view class="section-title">职业要求</view>
			<view class="occupation-selector">
				<picker :range="occupationOptions" :value="occupationIndex" @change="onOccupationChange" class="picker">
					<view class="picker-value">
						<text>{{ formData.occupation || '请选择职业要求' }}</text>
						<image class="arrow-icon" src="/static/images/arrow-right.png" mode="aspectFit"></image>
					</view>
				</picker>
			</view>
		</view>
		
		<view class="section">
			<view class="section-title">期望标签</view>
			<view class="tags-container">
				<view 
					v-for="(tag, index) in tagOptions" 
					:key="index" 
					class="tag-item" 
					:class="{ active: selectedTags.includes(tag) }"
					@click="toggleTag(tag)"
				>
					<text>{{ tag }}</text>
				</view>
			</view>
		</view>
		
		<view class="submit-btn" @click="savePreference">
			<text>保存</text>
		</view>
	</view>
</template>

<script>
	import { getPreferenceApi, updatePreferenceApi, getPreferenceSuggestionsApi } from '@/api/index.js';
	
	export default {
		data() {
			return {
				formData: {
					age_min: 20,
					age_max: 35,
					height_min: 160,
					height_max: 180,
					income: '',
					education: '',
					occupation: '',
					tags: []
				},
				ageRange: [20, 35],
				heightRange: [160, 180],
				incomeOptions: ['不限', '3000以上', '5000以上', '8000以上', '10000以上', '15000以上', '20000以上'],
				incomeIndex: 0,
				educationOptions: ['不限', '高中及以上', '大专及以上', '本科及以上', '硕士及以上', '博士及以上'],
				educationIndex: 0,
				occupationOptions: ['不限', '企业白领', '公务员', '教师', '医生', '工程师', '设计师', '自由职业', '创业者'],
				occupationIndex: 0,
				tagOptions: ['顾家', '有责任心', '孝顺', '有上进心', '幽默', '温柔', '善良', '聪明', '大方', '体贴', '浪漫', '成熟稳重'],
				selectedTags: []
			}
		},
		onLoad() {
			this.getPreference();
			this.getPreferenceSuggestions();
		},
		methods: {
			// 获取择偶要求
			getPreference() {
				this.$hr.methods.loading();
				getPreferenceApi().then(res => {
					this.$hr.methods.hideloading();
					if (res) {
						// 填充表单数据
						this.formData = {
							age_min: res.age_min || 20,
							age_max: res.age_max || 35,
							height_min: res.height_min || 160,
							height_max: res.height_max || 180,
							income: res.income || '',
							education: res.education || '',
							occupation: res.occupation || '',
							tags: res.tags || []
						};
						
						// 更新范围数组
						this.ageRange = [this.formData.age_min, this.formData.age_max];
						this.heightRange = [this.formData.height_min, this.formData.height_max];
						
						// 更新选择器索引
						this.incomeIndex = this.incomeOptions.indexOf(this.formData.income);
						if (this.incomeIndex === -1) this.incomeIndex = 0;
						
						this.educationIndex = this.educationOptions.indexOf(this.formData.education);
						if (this.educationIndex === -1) this.educationIndex = 0;
						
						this.occupationIndex = this.occupationOptions.indexOf(this.formData.occupation);
						if (this.occupationIndex === -1) this.occupationIndex = 0;
						
						// 更新已选标签
						this.selectedTags = this.formData.tags;
					}
				}).catch(() => {
					this.$hr.methods.hideloading();
					this.$hr.methods.toast('获取择偶要求失败');
				});
			},
			
			// 获取择偶建议
			getPreferenceSuggestions() {
				getPreferenceSuggestionsApi().then(res => {
					if (res && res.tags) {
						// 更新标签选项
						this.tagOptions = res.tags;
					}
				}).catch(err => {
					console.error('获取择偶建议失败', err);
				});
			},
			
			// 最小年龄变化
			onMinAgeChange(e) {
				const minAge = e.detail.value + 18;
				if (minAge > this.ageRange[1]) {
					this.ageRange = [minAge, minAge];
				} else {
					this.ageRange = [minAge, this.ageRange[1]];
				}
				this.formData.age_min = this.ageRange[0];
				this.formData.age_max = this.ageRange[1];
			},
			
			// 最大年龄变化
			onMaxAgeChange(e) {
				const maxAge = e.detail.value + 18;
				if (maxAge < this.ageRange[0]) {
					this.ageRange = [maxAge, maxAge];
				} else {
					this.ageRange = [this.ageRange[0], maxAge];
				}
				this.formData.age_min = this.ageRange[0];
				this.formData.age_max = this.ageRange[1];
			},
			
			// 最小身高变化
			onMinHeightChange(e) {
				const minHeight = e.detail.value + 150;
				if (minHeight > this.heightRange[1]) {
					this.heightRange = [minHeight, minHeight];
				} else {
					this.heightRange = [minHeight, this.heightRange[1]];
				}
				this.formData.height_min = this.heightRange[0];
				this.formData.height_max = this.heightRange[1];
			},
			
			// 最大身高变化
			onMaxHeightChange(e) {
				const maxHeight = e.detail.value + 150;
				if (maxHeight < this.heightRange[0]) {
					this.heightRange = [maxHeight, maxHeight];
				} else {
					this.heightRange = [this.heightRange[0], maxHeight];
				}
				this.formData.height_min = this.heightRange[0];
				this.formData.height_max = this.heightRange[1];
			},
			
			// 收入变化
			onIncomeChange(e) {
				this.incomeIndex = e.detail.value;
				this.formData.income = this.incomeOptions[this.incomeIndex];
			},
			
			// 学历变化
			onEducationChange(e) {
				this.educationIndex = e.detail.value;
				this.formData.education = this.educationOptions[this.educationIndex];
			},
			
			// 职业变化
			onOccupationChange(e) {
				this.occupationIndex = e.detail.value;
				this.formData.occupation = this.occupationOptions[this.occupationIndex];
			},
			
			// 切换标签
			toggleTag(tag) {
				const index = this.selectedTags.indexOf(tag);
				if (index === -1) {
					// 最多选择5个标签
					if (this.selectedTags.length >= 5) {
						this.$hr.methods.toast('最多选择5个标签');
						return;
					}
					this.selectedTags.push(tag);
				} else {
					this.selectedTags.splice(index, 1);
				}
				this.formData.tags = this.selectedTags;
			},
			
			// 保存择偶要求
			savePreference() {
				this.$hr.methods.loading('保存中...');
				updatePreferenceApi(this.formData).then(res => {
					this.$hr.methods.hideloading();
					this.$hr.methods.toast('保存成功', 'success');
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}).catch(() => {
					this.$hr.methods.hideloading();
					this.$hr.methods.toast('保存失败');
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style> 